<template>
	<view class="layout pageBg4">
		<view class="userInfo">
			<view class="avatar">
				<image :src="userInfo.avatar" mode="aspectFill"></image>
			</view>
			<view class="address">
				<button>我的头像</button>
				
			</view>
		</view>
		<view class="seciton">
			<view class="list">
				<view class="left">
					<view class="text">
						姓名
					</view>
				</view>
				<view class="right">
					<input type="text" v-model="userInfo.name" @input="updateName"/>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<view class="text">
						性别
					</view>
				</view>
				<view class="right">
					<radio-group name="radio" class="radio" @change="radioChange">
						<label>
							<radio name="gender" value="0" :checked="userInfo.sex === '0'"/><text>男</text>
						</label>
						<label>
							<radio name="gender" value="1" :checked="userInfo.sex === '1'" /><text>女</text>
						</label>
						<view class="fill">
						</view>
					</radio-group>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<view class="text">
						学校
					</view>
				</view>
				<view class="right">
					<input type="text" disabled/>
				</view>
			</view>
			<view class="list" v-if="isStudent">
				<view class="left">
					<view class="text">
						班级
					</view>
				</view>
				<view class="right">
					<input type="text" disabled/>
				</view>
			</view>
			<view class="list" v-if="isStudent">
				<view class="left" >
					<view class="text">
						学号
					</view>
				</view>
				<view class="right">
					<input type="text" disabled/>
				</view>
			</view>
			<view class="list" v-else>
				<view class="left">
					<view class="text">
						工号
					</view>
				</view>
				<view class="right">
					<input type="text" disabled/>
				</view>
			</view>
		</view>
		<view class="bottom">
			<button @click="save">保存</button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import apis from '../../api/apis.js'
	const userInfo = ref({})
	const isStudent = ref(true)
	const getUserInfo = () => {
		userInfo.value = uni.getStorageSync("userInfo")
	}
	onLoad(()=>{
		getUserInfo()
		if(userInfo.value.userType !== 0)
			isStudent.value = false
		else
			isStudent.value = true
	})
	
	const radioChange = (e)=>{
		userInfo.value.sex = e.detail.value
		console.log(userInfo.value)
		
	}
	const updateName = (e)=>{
		userInfo.value.name = e.detail.value
		console.log(userInfo.value)
		
	}
	

	
	const save = async()=>{
		// userInfo.value.avatar = 'https://i-blog.csdnimg.cn/blog_migrate/00e6f13b5a22982ad54d58895a254fb4.png'
		// console.log(userInfo.value.avatar)
		let req = await apis.updateUserInfo(userInfo.value).then(res=>{
			uni.setStorageSync("userInfo",userInfo.value)
			uni.showToast({
			title:"保存成功"
			})
		}).catch(err=>{
				uni.showToast({
				title:"保存失败",
				icon:'error'
				})
			})
	}
</script>

<style lang="scss" scoped>
	.layout{
		.userInfo{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 60rpx 0;
			.avatar{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.address{
				margin-top: 10rpx;
				height: 80rpx;
				button{
					height: 60%;
					width: 150rpx;
					font-size: 20rpx;
					background-color: rgba(40, 103, 255, 1);
					color: white;
				}
			}
		}
		.seciton{
			width: 650rpx;
			margin: 10rpx auto;
			// border: 1px solid #eee;
			border-radius: 10rpx;
			box-shadow:  0 0 30rpx rgba(0, 0, 0, 0.05);
			.list{
				position: relative;
				display: flex;
				justify-content: space-around;
				padding: 0rpx 20rpx;
				height: 100rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-bottom: 1px solid #eee;
				border-radius: 20rpx;
				&:last-child{ border-bottom: none;}
				.left{
					display: flex;
					align-items: center;
					.text{
						font-size: 30rpx;
						padding: 20rpx;
					}
					
				}	
				.right{
					display: flex;
					align-items: center;
					.radio{
						display: flex;
						width: 400rpx ;
						justify-content: space-between;
						.fill{
							width: 40%;
						}
					}
					input{
						width: 400rpx;
						border: 1rpx solid #d0d0d0;
					}
				}
			}
		}
		.bottom{
			margin: 100rpx auto;
			width: 200rpx;
			button{
				background-color: rgba(40, 103, 255, 1);
				color: #fff;
			}
		}
	}
</style>
